<template>
  <section class="login-wrapper">
    <!-- 头部标题 -->
    <div class="title-box">数据中心基础设施智能监控管理系统</div>
    <!-- 登录部分 -->
    <div class="login-wrapper-box">
      <!-- 标题 -->
      <div class="login-box">
        <p class="login-title">登录</p>
        <!-- form部分 -->
        <div class="login-form">
          <a-form
            :model="loginForm"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item>
              <a-input v-model:value="loginForm.username" placeholder="请输入账号">
                <template #prefix>
                  <user-outlined type="user" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input type="password" v-model:value="loginForm.password" placeholder="请输入密码">
                <template #prefix>
                  <UnlockOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-checkbox >记住密码</a-checkbox>
            </a-form-item>
            <a-form-item>
              <a-button type="dashed">登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { UserOutlined, UnlockOutlined } from "@ant-design/icons-vue";
import { defineComponent, UnwrapRef, reactive } from "vue";
interface FormState {
  username: string;
  password: string ;
}
export default defineComponent({
  components: {
    UserOutlined,
    UnlockOutlined,
  },

  setup() {
    const loginForm: UnwrapRef<FormState> = reactive({
      username: "",
      password: "",
    });
  
    return {
      labelCol: { span: 0 },
      wrapperCol: { span: 24 },
      loginForm    
    };
  },
});
</script>


<style lang="scss">
@import url('../../assets/css/common.scss');

$titleColor: #209ee6;
$formColor: #92c9f3;
$formBorderColor: #4675a5;
.center {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.login-wrapper {
  width: 100%;
  height: 100vh;
  background: url("../../assets/images/loginBg1.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  // 标题部分
  .title-box {
    margin-top: 100px;
    color: $titleColor;
    font-size: 36px;
    text-align: center;
    letter-spacing: 20px;
    font-weight: bold;
  
    text-shadow: 4px 6px 4px #0d4f8a;
  }
  .login-wrapper-box {
    width: 620px;
    height: 620px;
    background: url("../../assets/images/loginBox1.png") no-repeat;
    @extend .center;
    .login-box {
      @extend .center;
      top: -20px;
      width: 300px;
      height: 270px;
      // border: 1px solid red;
      .login-title {
        color: #45bafe;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 4px;
      }
      .login-form {
        .ant-form {
          .ant-form-item {
            margin-bottom: 30px;
            &:first-child {
              margin-top: 30px;
            }
            .ant-input-prefix {
              color: $formColor;
              margin-right: 10px;
            }
            .ant-input-affix-wrapper {
              background: transparent;
              border: 1px solid $formBorderColor;
              color: $formColor;
              .ant-input {
                background: transparent;
                color: $formColor;
                &::placeholder {
                  color: $formColor;
                }
              }
            }
            .ant-checkbox-wrapper {
              color: $formColor;
              .ant-checkbox {
                &-inner {
                  background-color: transparent !important;
                  border: 1px solid $formBorderColor !important;
                }
              }
            }
            .ant-btn {
              display: block;
              border: 1px solid #2b7ae1;
              background: #2b7ae1;
              color: #fff;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>